<template>
    <Modal :mask-closable="false" v-model="purchaseVisble" class="modal-content-layout" :title="$t('preliminary.createOrder')">
        <Form class="purchase-add-form" ref="fbilloForm" :model="formTop" label-position="top" :rules="validatePurchase">
          <FormItem :label="`${$t('equipmentscrapped.From')}:`">
                <RadioGroup v-model="formTop.sbly">
                    <Radio v-for="(item, index) in sourceList" :key="index" :label="item.id">{{ item.name }}</Radio>
                </RadioGroup>
            </FormItem>
          <FormItem :label="`${$t('preliminary.SAT')}:`">
                <RadioGroup v-model="formTop.supplierCheckFlag" @on-change="handleRadio($event)">
                    <Radio v-for="(item, index) in supplierCheckFlagList" :key="index" :label="item.id">{{ item.name }}
                    </Radio>
                </RadioGroup>
            </FormItem>
          <FormItem :label="`${$t('preliminary.Result')}:`" v-if="formTop.supplierCheckFlag===1">
                <RadioGroup v-model="formTop.supplierCheckResult">
                    <Radio v-for="(item, index) in supplierCheckResultList" :key="index" :label="item.id">{{
                            item.name
                        }}
                    </Radio>
                </RadioGroup>
            </FormItem>
            <FormItem>
                <Input style="width: 100%" v-model="formTop.supplierCheckMessage" type="textarea"
                       :autosize="{ minRows: 2, maxRows: 3 }" :placeholder="$t('preliminary.p6')"></Input>
            </FormItem>
          <FormItem :label="`${$t('preliminary.SATReport')}:`" v-if="formTop.supplierCheckFlag===1">
                <div style="height: 40px; width:120px; ">
                    <Button type="primary"
                            @click="exportTemplate">{{$t('preliminary.DownloadTemplate')}}
                    </Button>
                </div>
                <Upload ref="fileUpload" :show-upload-list="false" :before-upload="satHandleBeforeUpload" type="drag"
                        action="" style="width:120px">
                    <Button type="primary">{{$t('common.Upload')}}</Button>
                </Upload>

                <div class="file-list" v-for="(item, index) in satFileList" :key="index">
                    <span class="item-src">{{ item.fileName }}</span>
                    <Icon class="item-icon" type="ios-trash-outline" size="20"
                          @click="delSatFileList(index)" v-if="item"></Icon>
                </div>
            </FormItem>
            <FormItem :label="$t('preliminary.shippingList')">
                <Upload ref="fileUpload" :show-upload-list="false" :before-upload="handleBeforeUpload" type="drag"
                        action="" style="width:120px">
                    <Button type="primary">{{$t('common.Upload')}}</Button>
                </Upload>

                <div class="file-list" v-for="(item, index) in setFileList" :key="index">
                    <span class="item-src">{{ item.fileName }}</span>
                    <Icon class="item-icon" type="ios-trash-outline" size="20" @click="delFileList(index)"
                          v-if="item"></Icon>
                </div>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{$t('common.Cancle')}}</Button>
            <Button type="primary" :loading="loadingVisible" @click="okClick">{{$t('maintenance.Confirmed')}}</Button>
        </div>
    </Modal>
</template>

<script>
import fileDownload from 'js-file-download';

export default {
    name: "addPurchaseModal",
    data() {
        return {
            resultVisble: false,
            purchaseVisble: false,
            loadingVisible: false,
            formTop: {
                sbly: 1,
                supplierCheckFlag: 1,
                supplierCheckResult: null,
            },
            //aList: [],
            setFileList: [],//SAT上传列表
            satFileList: [],
            validatePurchase: {
                // sbly: [
                //     { required: true, message: '请选择设备来源', trigger: 'change' }
                // ],
                // supplierCheckFlag: [
                //     { required: true, message: '请选择是否需要供应商长验/SAT', trigger: 'change' }
                // ],
                //  supplierCheckResult: [
                //     { required: true, message: '请选择供应商厂验/SAT结果', trigger: 'change' }
                // ],
            },
            sourceList: [
              {id: 1, name: this.$t('preliminary.HomeMade')},
              {id: 6, name: this.$t('preliminary.Domestic')},
              {id: 2, name: this.$t('preliminary.Overseas')},
              {id: 4, name: this.$t('preliminary.Leasing')},
              {id: 5, name: this.$t('preliminary.CustomerProvided')}
            ],
            supplierCheckFlagList: [
              {id: 1, name:this.$t('common.Yes')},
              {id: 0, name: this.$t('common.No')}
            ],
            supplierCheckResultList: [
              {id: 1, name: this.$t('spareParts.pass')},
              {id: 0, name: this.$t('spareParts.Fail')}
            ],
            uploadList: []
        }
    },
    methods: {
        show(record) {
            this.purchaseVisble = true
            this.uploadList = []
            this.setFileList = []
            this.satFileList = []
            this.formTop = {
                ...record,
                sbly: Number(record.sbly),
                supplierCheckFlag: Number(record.supplierCheckFlag),
                satjg: Number(record.satjg),

            }
        },
        handleRadio(e) {
            if (e == 0) {
                this.formTop.supplierCheckResult = null
                this.formTop.supplierCheckMessage = null
                this.satFileList = []
            }
        },
        okClick() {
           if (!this.formTop.sbly){
             this.$Message.warning(({content: this.$t('preliminary.p9'), duration: 6, closable: true}));
             return
           }
            if (this.formTop.supplierCheckFlag == 1 && !this.satFileList.length) {
                this.$Message.warning(({content: this.$t('preliminary.p7'), duration: 6, closable: true}));
                return false
            }
            if (!this.setFileList.length) {
                this.$Message.warning(({content: this.$t('preliminary.p8'), duration: 6, closable: true}));
                return false
            }


            //let { sbly, supplierCheckFlag, supplierCheckResult,supplierCheckMessage, ebeln, banfn, bnfpo, orderno, ebelp,id } = this.formTop
            let {id, sbly, supplierCheckFlag, supplierCheckResult, supplierCheckMessage} = this.formTop

            let params = {
                id,
                sbly,
                supplierCheckFlag,
                supplierCheckResult,
                supplierCheckMessage,
            }
            // params.aList=this.aList,
            // params.id= this.$route.record.id
            params.deliverBill = this.setFileList
            params.satBill = this.satFileList
            this.$refs.fbilloForm.validate((valid) => {
                if (valid) {
                    this.loadingVisible = true
                    this.axios({
                        method: 'post',
                        url: '/dms/dmsPurchase/updateOrder',
                        data: params
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.purchaseVisble = false
                            this.loadingVisible = false
                            this.$Message.success(this.$t('preliminary.successfulEntry'))
                            this.$refs.fbilloForm.resetFields();
                            this.$emit('refresh')
                            //this.$parent.refresh()
                        } else {
                            // this.purchaseVisble = false
                            this.loadingVisible = false
                            this.$Message.error(({content: res.msg, duration: 6, closable: true}))
                        }
                    })
                }
            })
        },
        //下载模板
        exportTemplate() {
            const filName = 'SAT验收模板'
            this.axios({
                method: 'get',
                url: '/dms/dmsPurchase/exportSatCheckReportTemplate',
                responseType: 'blob',
                params: {}
            }).then(res => {
                fileDownload(res, filName + '.docx')
            })
        },
        //sat上传
        satHandleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.satFileList.push({
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                }
            })
            return false;
        },
        //发布清单上传
        handleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.setFileList.push({
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                }
            })
            return false;
        },
        //文件预览
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath))
            }
        },
        //文件删除
        delFileList(id) {
            this.setFileList = this.setFileList.filter((item, index) => index != id)
        },
        delSatFileList(id) {
            this.satFileList = this.satFileList.filter((item, index) => index != id)
        },
        handleCancel() {
            this.purchaseVisble = false
            this.$refs.fbilloForm.resetFields();
        }

    }
}
</script>
<!--<style lang="scss">-->
<!--.purchase-add-form{-->
<!--  .ivu-input-word-count{-->
<!--    padding-left: 0;-->
<!--  }-->
<!--}-->

<style scoped lang="scss">
.ivu-input-wrapper {
    width: 21%;
}

.uploadWrapper {
    width: 100%;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    /*a {*/
    /*    display: inline-block;*/
    /*    width: 100%;*/
    /*    line-height: 48px;*/
    /*    !*&:hover {*!*/
    /*    !*    overflow: visible;*!*/
    /*    !*    -ms-text-overflow: inherit;*!*/
    /*    !*    text-overflow: inherit;*!*/
    /*    !*}*!*/
    /*}*/
}

.file-list {
    /*margin: 20px;*/
    .item-src {
        display: inline-block;
        line-height: 32px;
        color: #187bdb;
        cursor: pointer;

    }

    .item-icon {
        line-height: 32px;
        color: #187bdb;
    }
}
</style>
